<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.global.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click="getMsg()">获取笑话</button>
			<p>{{msg}}</p>
		</div>
	</body>
	<script>
	var app=new Vue({
		el:"#app",
		data:{
			msg:""
		},
		methods:{
			getMsg:function(){
				console.log(this)
				var that=this
				// Make a request for a user with a given ID
				axios.get('http://localhost:8086/hello')
				  .then(function (response) {
				    // handle success
				    console.log(response);
					console.log(this)
					// 在axios请求中的this对象指向不在是原来的this（vue）
					// 若还需要使用原来的this，可以提前将对象保存起来
					// 后续使用保存起来的对象即可
					that.msg=response.data
				  })
				  .catch(function (error) {
				    // handle error
				    console.log(error);
				  })
				  .then(function () {
				    // always executed
				  });

			}
		}
	})
	
	</script>
</html>
